<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box  {width: 620px;border: 1px solid #ccc;margin: 50px auto;}
			li {list-style: none;}
			textarea {width: 600px;height: 140px; border: 1px solid #ccc;margin: 10px;}
			.box a {width: 80px;height: 30px;display: block;text-align: center;line-height: 30px;background: #ffa500;text-decoration: none;color: #fff;border-radius: 3px;margin-left: 10px;}
			.box ul {padding-left: 10px;width: 600px;margin-top: 10px;padding-bottom: 10px;}
			.box ul li {line-height: 34px;border-bottom: 1px dashed #ccc;}
			.box ul li span {float: right;cursor: pointer;}
		</style>
	</head>
	<body>
		<div class="box">
			<textarea name="" rows="" cols=""></textarea>
			<a href="javascript:viod(0)" class="publish">发布</a>
			<ul>
				<li><span>删除</span>暗暗</li>
				<li><span>删除</span>世界再大也要回家</li>
				<li><span>删除</span>微博之夜</li>
			</ul>
		</div>
		<script src="jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.box .publish').click(function(){
					var s = $('textarea').val();
					$('textarea').val('');
					if (s === '') {
						return;
					}else{
						$('<li><span>删除</span>' + s +'</li>').prependTo('.box ul').hide().stop().slideDown();
					}
				});
				$(document).on('click','.box span',function(){
					$(this).parent().stop().slideUp();
				});
			});
		</script>
	</body>
</html>
